<template>
  <div>
    <div class="box">
      <div class="download-fileNav">
        <router-link to="/adminPage/download/all">
          <div v-if="this.component == 'all'" class="fileNav" style="color: rgb(212,149,0); font-weight: bolder">全部（非词条）</div>
          <div v-else class="fileNav" >全部（非词条）</div>
        </router-link>
        <router-link to="/adminPage/download/userIncrease">
          <div v-if="this.component == 'userIncrease'" style="color: rgb(212,149,0); font-weight: bolder" class="fileNav">用户增长趋势</div>
          <div v-else  class="fileNav">用户增长趋势</div>
        </router-link>
        <router-link to="/adminPage/download/userActive">
          <div v-if="this.component == 'userActive'" style="color: rgb(212,149,0); font-weight: bolder" class="fileNav">用户活跃趋势</div>
          <div v-else  class="fileNav">用户活跃趋势</div>
        </router-link>
        <router-link to="/adminPage/download/worksIncrease">
          <div v-if="this.component == 'worksIncrease'" style="color: rgb(212,149,0); font-weight: bolder" class="fileNav">作品增长趋势</div>
          <div v-else  class="fileNav">作品增长趋势</div>
        </router-link>
        <router-link to="/adminPage/download/userGender">
          <div v-if="this.component == 'userGender'" style="color: rgb(212,149,0); font-weight: bolder" class="fileNav">用户性别比例</div>
          <div v-else  class="fileNav">用户性别比例</div>
        </router-link>
        <router-link to="/adminPage/download/userCodeAge">
          <div v-if="this.component == 'userCodeAge'" style="color: rgb(212,149,0); font-weight: bolder" class="fileNav">用户码龄比例</div>
          <div v-else  class="fileNav">用户码龄比例</div>
        </router-link>
        <router-link to="/adminPage/download/reportedType">
          <div v-if="this.component == 'reportedType'" style="color: rgb(212,149,0); font-weight: bolder" class="fileNav">举报类型分布</div>
          <div v-else  class="fileNav">举报类型分布</div>
        </router-link>
        <div style="float:left;height: 25px;margin-left: 10px; border-right: #cacaca solid 1.5px; margin-top: 10px"></div>
        <router-link to="/adminPage/download/translate">
          <div v-if="this.component == 'translate'" style="color: rgb(212,149,0); font-weight: bolder" class="fileNav2">翻译词条</div>
          <div v-else  class="fileNav2">翻译词条</div>
        </router-link>
        <router-link to="/adminPage/download/baike">
          <div v-if="this.component == 'baike'" style="color: rgb(212,149,0); font-weight: bolder" class="fileNav2">百科词条</div>
          <div v-else  class="fileNav2">百科词条</div>
        </router-link>
<!--        <div class="search">-->
<!--          <form action="javascript:;" method="get">-->
<!--            <input type="text" placeholder="请输入关键内容" autocomplete="off" name="searchValue" title="点击输入内容">-->
<!--            <input type="submit" value="搜索">-->
<!--          </form>-->
<!--        </div>-->
      </div>
      <div>
        <router-view @component="routerView"></router-view>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "AdminDownload",
        data(){
            return{
                component:''
            }
        },
        mounted(){
            this.$emit("component","download")
        },
        methods:{
            routerView(val){
                this.component = val
            },
        }
    }
</script>

<style scoped>
  .box{
    width: 100%;
    min-height: 381px;
    border-radius: 3px;
    /*border-radius: 6px;*/
    padding-top: 1px;
    padding-bottom: 8px;
    background-color: white;
    letter-spacing: 1px;
  }
  .download-fileNav{
    width: 98%;
    height: 45px;
    margin: 0px auto;
    margin-top: 10px;
    border-radius: 2px;
    background-color: #ebeff1;
  }
  .fileNav{
    float: left;
    min-width: 50px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 12px;
    margin-left: 1%;
    margin-top: 7.5px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 3px;
    /*border-radius: 5px;*/
    background-color: rgb(247, 247, 247);
    color: rgb(116, 116, 116);
    transition: 0.3s;
  }
  .fileNav:hover{
    background-color: rgb(218, 218, 218);
  }

  .fileNav2{
    float: left;
    min-width: 50px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 12px;
    margin-left: 1%;
    margin-top: 7.5px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 3px;
    /*border-radius: 5px;*/
    background-color: rgba(251, 251, 251, 0.91);
    color: rgb(116, 116, 116);
    transition: 0.3s;
  }
  .fileNav2:hover{
    /*color: rgb(255, 255, 255);*/
    background-color: rgb(218, 218, 218);
  }

  .search{
    float: right;
    width: 265px;
    height: 32px;
    margin-right: 1%;
    margin-top: 7.5px;
    position: relative;
  }
  .search input{
    height: 25px;
  }
  .search input:nth-child(1){
    height: 27px;
    width: 200px;
    font-size: 13px;
    border: rgb(221, 221, 221) solid 1px;
    background-color: rgb(251, 251, 251);
    color: rgb(94, 94, 94);
    padding-left: 10px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    /*border-top-left-radius: 5px;*/
    /*border-bottom-left-radius: 5px;*/
  }
  input::placeholder {
    color: rgb(189, 189, 189);
    font-size: 13px;
  }
  .search input:nth-child(2){
    height: 31px;
    width: 50px;
    position: absolute;
    top: 0px;
    border: none;
    color: rgb(248, 248, 248);
    background-color: cadetblue;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    /*border-top-right-radius: 5px;*/
    border-bottom-right-radius: 5px;
    font-size: 13px;
  }
  .search input:nth-child(2):hover{
    height: 31px;
    width: 50px;
    border: none;
    color: rgb(248, 248, 248);
    background-color: #00897B;
  }
  .search input:nth-child(2):active{
    color: rgb(248, 248, 248);
    background-color: #007e71;
  }
</style>
